<template>
  <!-- 发现页 -->
  <div class="discover">
    <div class="rotation" v-if="images.length">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" :lazy-render="true" indicator-color="#BDBEBD">
        <van-swipe-item v-for="ele in images" :key="ele.bannerid">
          <img :src="ele.image" width="100%" height="100%" />
          <!-- <template #indicator>
            <div class="custom-indicator"></div>
          </template> -->
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="push-lists">
      <!-- 今日 -->
      <div class="data-push" v-if="today.lists.length">
        <h3 class="time">{{ today.title }}</h3>
        <div class="push-img" v-for="ele in today.lists" :key="ele.postid" @click="ShowPopup([true,ele.postid])">
          <img v-lazy="ele.image" alt="" />
          <div class="lists-title">
            <p>
              <span>{{ ele.cates[0].catename }}</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span>{{ ele.duration | min }}</span>
            </p>
            <div>{{ ele.title }}</div>
          </div>
        </div>
      </div>
      <!-- 热门 -->
      <div class="hot-push" v-if="hot.lists.length">
        <h3 class="hot" @click="toMore(['hot', hot.title])">{{ hot.title }} <span>more</span></h3>
        <div class="push-img" @click="ShowPopup([true,hot.lists[0].postid])">
          <img v-lazy="hot.lists[0].image" alt="" />
          <div class="lists-title">
            <p>
              <span>{{ hot.lists[0].cates[0].catename }}</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span>{{
                hot.lists[0].duration | min
              }}</span>
            </p>
            <div>{{ hot.lists[0].title }}</div>
          </div>
        </div>
        <div class="hot-four">
          <div v-for="ele in hot.lists.slice(1)" :key="ele.postid" @click="ShowPopup([true,ele.postid])">
            <img v-lazy="ele.image" alt="" />
            <div class="lists-title">
              <p>
                <span>{{ ele.cates[0].catename }}</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span>{{ ele.duration | min }}</span>
              </p>
              <div>{{ ele.title }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 专题 -->
      <div class="title-push" v-if="album.lists.length">
        <h3 class="title" @click="toMore(['album',album.title])">{{ album.title }} <span>more</span></h3>
        <van-swipe :autoplay="3000" :lazy-render="true" indicator-color="#BDBEBD">
          <van-swipe-item class="push-img" v-for="ele in album.lists" :key="ele.postid">
            <img v-lazy="ele.image" alt="" @click="toSpecial(ele.postid)" />
            <div class="lists-title">
              <span>{{ album.title }}</span>
              <p>{{ ele.title }}</p>
              <div>{{ ele.app_fu_title }}</div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 往日 -->
      <van-list v-model="loading" :finished="finished" finished-text="- End -" @load="onLoad" :error.sync="error"
        error-text="请求失败，点击重新加载" :immediate-check="false">
        <div v-if="past.length">
          <div class="past-push" v-for="(ele,index) in past" :key="index">
            <h3 class="time">{{ ele.date }}</h3>
            <div class="push-img" v-for="item in ele.lists" :key="item.postid" @click="ShowPopup([true,item.postid])">
              <img v-lazy="item.image" alt="" />
              <div class="lists-title">
                <p>
                  <span>{{ item.cates[0].catename }}</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span>{{ item.duration | min }}</span>
                </p>
                <div>{{ item.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
  import {
    getHome,
    getPast
  } from "../../api/base";
  import {
    mapMutations
  } from "vuex"
  export default {
    name: "discover",
    data() {
      return {
        images: [], //轮播
        today: {
          lists: [],
          title: ""
        }, //今日列表
        hot: {
          lists: [],
          title: ""
        }, //热门
        album: {
          lists: [],
          title: ""
        }, //专题
        past: [], //往日的列表
        // loadFlag:true //
        loading: false,
        finished: false,
        error: false,
      };
    },

    methods: {
      onLoad() {
        //请求往期数据
        if (this.past) {
          console.log("请求前一日数据");
          let more = this.past.slice(-1)[0].lastid;

          if (more) {
            getPast(more).then((data) => {
              this.past.push({
                date: data.data.selection_title, //日期
                lastid: data.data.lastid, //最后的id
                lists: data.data.list, //列表
              });
              console.log("自身", this.past);
              // 加载状态结束
              this.loading = false;
              // 数据全部加载完成
              this.off++;
              if (data.data.length < 10) {
                this.finished = true;
              }
            }).catch(() => {
              this.error = true;
              this.loading = false;
            });
          } else {
            this.finished = true;
          }
        }
      },

      LoadHomeLists() { //首次请求数据
        getHome().then((data) => {
          console.log("首页数据", data);
          this.images = data.data.banner.list;
          this.today.lists = data.data.today.list;
          this.today.title = data.data.today.selection_title;
          this.hot.lists = data.data.hot.list;
          this.hot.title = data.data.hot.selection_title;
          this.album.lists = data.data.album.list;
          this.album.title = data.data.album.selection_title;
          this.past.push({
            date: data.data.posts.selection_title, //日期
            lastid: data.data.posts.lastid, //最后的id
            lists: data.data.posts.list, //列表
          });
        });
      },
      toMore([title, name]) {
        this.$router.push({
          name: 'More',
          params: {
            tab: title,
            name: name
          }
        })
      },
      ...mapMutations(['ShowPopup']),
      toSpecial(id) {
        console.log("专题文章", id);
        this.$router.push({
          name: 'Special',
          params: {
            id: id
          }
        })
      }
    },
    // filters: {
    //   min(val) {
    //     let m = Math.floor(val / 60);
    //     m = m < 10 ? "0" + m : m;
    //     let s = Math.floor(val % 60);
    //     s = s < 10 ? "0" + s : s;
    //     return m + "'" + s + '"';
    //   },
    // },
    created() {
      this.LoadHomeLists();
    },
    mounted() {

    },
  };
</script>

<style lang="less" scoped>
  .rotation {
    width: 100%;
    height: 212px;

    & /deep/ .van-swipe__indicator {
      width: 14px;
      height: 2px;
      border-radius: 0;
    }

    .van-swipe-item {
      transform: translateZ(0);
    }
  }

  .title-push {
    & /deep/ .van-swipe__indicator {
      width: 14px;
      height: 2px;
      border-radius: 0;
    }

    .van-swipe-item {
      transform: translateZ(0);
    }

    .title {
      height: 58px;
      line-height: 58px;
      font-size: 14px;
      color: #fff;
      text-align: center;
    }

    .push-img {
      position: relative;
      height: 236px;

      & img {
        width: 100%;
        height: 100%;
      }

      .title {
        line-height: 58px;
        font-size: 14px;
        color: #fff;
        text-align: center;
      }

      .lists-title {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 0 0 16px 10px;
        color: #fff;
        text-align: left;

        span {
          display: inline-block;
          width: 38px;
          font-size: 12px;
          padding: 8px 0;
          border-bottom: 1px solid #fff;
        }

        p {
          font-size: 14px;
          margin: 10px 0 12px 0;
        }

        div {
          font-size: 12px;
        }
      }
    }
  }

  .data-push,
  .hot-push,
  .past-push {

    .time,
    .hot {
      line-height: 58px;
      font-size: 14px;
      color: #fff;
      text-align: center;
    }

    .push-img {
      position: relative;
      height: 236px;

      & img {
        width: 100%;
        height: 100%;
      }

      .lists-title {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 0 0 16px 10px;
        color: #fff;
        text-align: left;

        p {
          font-size: 14px;
          margin-bottom: 10px;
        }

        div {
          font-size: 16px;
        }
      }
    }

    .hot-four {
      display: flex;
      flex-wrap: wrap;
      height: 234px;

      &>div {
        position: relative;
        width: 50%;
        height: 50%;

        &>img {
          width: 100%;
          height: 100%;
        }

        .lists-title {
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 0 0 8px 10px;
          color: #fff;
          text-align: left;

          p {
            font-size: 10px;
            margin-bottom: 6px;
          }

          div {
            width: 166px;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  .hot-push,
  .title-push {

    .hot,
    .title {
      position: relative;

      span {
        position: absolute;
        right: 10px;
        font-size: 12px;
        color: #ccc;
      }
    }
  }
</style>